<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner" /> -->

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->

    <br>
    <br>
    <br>

    <el-row type="flex" style="padding:10px 10px 10px;margin-bottom:0px;" justify="space-around" class="info-container">
      <el-col
        v-for="(item, i) in tableList"
        :key="item.type"
        :span="5"
      >
        <el-table
          :data="tableListData[i]"
        >
          <el-table-column
            :prop="item.type"
            :label="item.name"
            width="240"
          />
          <el-table-column
            prop="value"
            label=""
          />
        </el-table>
      </el-col>
    </el-row>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <el-row style="padding:10px 10px 10px;margin-bottom:0px;" class="system-container">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="op"
          label="服务器操作系统"
          width="180"
        />
        <el-table-column
          prop="app"
          label="程序版本"
          width="180"
        />
        <el-table-column
          prop="mysql"
          label="MySQL版本"
          width="180"
        />
        <el-table-column
          prop="safe"
          label="安全模式"
          width="180"
        />
        <el-table-column
          prop="date"
          label="更新日期"
          width="180"
        />
        <el-table-column
          prop="ip"
          label="IP版本"
          width="180"
        />
        <el-table-column
          prop="now"
          label="当前时间"
          width="180"
        />
        <el-table-column
          prop="total"
          label="使用总时长"
          width="180"
        />
      </el-table>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      tableData: [{
        op: 'Linux',
        app: 'v2.0.0',
        mysql: '5.6.16',
        safe: '高',
        date: '2020-12-03',
        ip: '20201201',
        now: '2020-12-06-12:00',
        total: '22hours'
      }],
      tableList: [
        { type: 'push', name: '资源发布情况' },
        { type: 'used_goods', name: '二手商品情况' },
        { type: 'ask', name: '申请情况' },
        { type: 'required_goods', name: '求购商品情况' }
      ],
      tableListData: [
        [
          { push: '目前剩余资源数量', value: '34' },
          { push: '库存警告资源数量', value: '10' },
          { push: '删除资源数量', value: '13' },
          { push: '资源评价信息', value: '26' }
        ],
        [
          { used_goods: '目前剩余资源数量', value: '24' },
          { used_goods: '库存警告资源数量', value: '5' },
          { used_goods: '删除资源数量', value: '14' },
          { used_goods: '资源评价信息', value: '16' }
        ],
        [
          { ask: '目前未审批申请数量', value: '13' },
          { ask: '已通过审核申请数量', value: '41' },
          { ask: '未通过审核申请数量', value: '7' }
        ],
        [
          { required_goods: '目前未审批求购数量', value: '15' },
          { required_goods: '已通过审核申请数量', value: '54' },
          { required_goods: '未通过审核申请数量', value: '6' }
        ]
      ]
    }
  },
  methods: {
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.info-container{
  background-color: rgb(255, 164, 201);
}
.system-container{
  background-color: rgb(252, 212, 177);
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(182, 183, 253);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
